<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in product_img_wx" :key="item.index">
                <img :src="item.url" width="100%" alt="">
            </van-swipe-item>
        </van-swipe>
        <div class="SwiperBottom">
            <p class="title">{{title}}</p>
            <p class="subtitle">{{subtitle}}</p>
            <div class="mark">
                <span v-for="(item) in mark" :key="item.name">{{item.name}}</span>
            </div>
            <p class="min_price" v-if="min_price">${{min_price}}/起一人</p>
        </div>
    </div>
</template>
<!--  :min_price="Detail.min_price" :mark="Detail.mark" 
:subtitle="Detail.subtitle" :title="Detail.title" 
:product_img_wx="Detail.product_img_wx" -->
<script>
export default {
    props: {
        product_img_wx: [Object, Array, String],
        min_price: [Object, Array, String],
        mark: [Object, Array, String],
        subtitle: [Object, Array, String],
        title: [Object, Array, String],
    },
    created() {
        console.log(this.mark);
    },
};
</script>

<style lang="scss" scoped>
img {
    height: 62vw;
}
.SwiperBottom {
    padding: 0.18rem;
    .title {
        font-family: PingFangSC-Light;

        font-size: 0.2rem;
        color: #333;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 0.08rem;
    }
    .subtitle {
        font-family: PingFangSC-Light;
        font-size: 0.16rem;
        color: #898989;
        letter-spacing: 0.004rem;
    }
    .mark{
        display: flex;
        padding: 0.1rem;
        span{
            display: inline-block;
            margin-right: 0.1rem;
            border: 0.01rem solid red;
            font-size: 0.14rem;
            padding: 0.02rem;
            color: #b62c2c;
        }
    }
    .min_price{
        font-size: 0.4rem;
        color: #b62c2c;
    }
}
</style>